<template>
  <div class="container">
    <!-- 内容部分 -->
    <div class="operate">
      <slot></slot>
      <el-tooltip content="xxxxxxx" placement="bottom">
        <img
          style="display: block; margin-right: auto"
          src="@/assets/tip.svg"
          alt=""
        />
      </el-tooltip>

      <slot name="op"></slot>
    </div>
    <div class="content" :style="{ maxHeight: item.h * 40 - 80 + 'px' }">
      <div class="content-item-main">
        <div class="content-item" v-for="ele in processState" :key="ele.type">
          <div>
            <span
              style="font-weight: 700; font-size: 28px; margin-right: 5px"
              >{{ ele.value }}</span
            ><span style="font-size: 14px; font-weight: 600">个</span>
          </div>
          <div
            style="
              color: #80838a;
              font-size: 12px;
              display: flex;
              align-items: center;
            "
          >
            <div style="margin-right: 5px">{{ ele.name }}</div>
            <img
              style="display: block; margin-right: 5px"
              src="@/assets/rightArrowSingle.svg"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  /**
   * @description 业务组件 -- 公告
   */
  import { defineProps } from "vue";
  defineProps(["item"]);

  const processState = [
    { type: "1", name: "项目总数", value: 86 },
    { type: "2", name: "待开始", value: 20 },
    { type: "3", name: "进行中", value: 20 },
    { type: "4", name: "已暂停", value: 20 },
    { type: "5", name: "已逾期", value: 12 },
    { type: "6", name: "已取消", value: 0 },
    { type: "7", name: "已完成", value: 14 },
  ];
</script>

<style scoped lang="scss">
  .container {
    user-select: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0px 10px 10px;
    font-size: 14px;
    .content {
      flex: 1;
      display: flex;
      flex-direction: row;
      margin-top: 10px;
      overflow: hidden;
    }
  }

  .content-item-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 200px;
    overflow: auto;
    .content-item {
      box-sizing: border-box;
      flex: 1;
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      height: 100%;
      justify-content: center;
      padding: 10px;
      text-wrap: nowrap;
      border-radius: 4px;
      background-color: #f6f8fa;
      margin: 0px 5px;
      max-height: 100px;
    }
  }
  .operate {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
</style>
